﻿
@{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/css/framework-font.css" rel="stylesheet" />
    <link href="~/css/framework-theme.css" rel="stylesheet" />
    <script src="~/lib/jquery/1.12.4/jquery.min.js"></script>
    <script src="~/lib/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link href="~/lib/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/lib/wdtree/tree.js"></script>
    <link href="~/lib/wdtree/tree.css" rel="stylesheet" />
    <link href="~/lib/select2/select2.min.css" rel="stylesheet" />
    <script src="~/lib/select2/select2.min.js"></script>
    <script src="~/lib/laydate/laydate.js"></script>
    <script src="~/lib/moment/moment.js"></script>
    <link href="~/lib/wizard/wizard.css" rel="stylesheet" />
    <script src="~/lib/wizard/wizard.js"></script>
    <script src="~/lib/validate/jquery.validate.min.js"></script>
    <script src="~/lib/datepicker/WdatePicker.js"></script>
    <script src="~/lib/jqgrid/5.3.0/i18n/grid.locale-cn.js"></script>
    <link href="~/css/framework-ui.css" rel="stylesheet" />
    <script src="~/js/framework-ui.js"></script>
</head>
<body>


    <script src="/lib/echarts/echarts-all.js"></script>

    <script src="/lib/echarts/infographic.js"></script>
    <script>
        $(function () {
            loadGaugeIIS();
            loadGaugeCPU();
            loadGaugeRAM();
            loadChart();
        })
        function loadGaugeIIS() {
            var myChart = echarts.init(document.getElementById('maina'));
            option = {
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                                width: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 30,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },

                        detail: {
                            formatter: '{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontWeight: 'bolder',
                                fontSize: 20
                            }
                        },
                        data: [{ value: 50 }]
                    }
                ]
            };
            myChart.setOption(option);
        }
        function loadGaugeCPU() {
            var myChartCUP = echarts.init(document.getElementById('mainb'), infographicTheme());
            optionCUP = {
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                                width: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 30,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },

                        detail: {
                            formatter: '{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontWeight: 'bolder',
                                fontSize: 20
                            }
                        },
                        data: [{ value: 50 }]
                    }
                ]
            };
            myChartCUP.setOption(optionCUP);
            clearInterval(timeTicket);
            var timeTicket = setInterval(function () {
                optionCUP.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                myChartCUP.setOption(optionCUP, true);
            }, 2000)
        }
        function loadGaugeRAM() {
            var myChart = echarts.init(document.getElementById('mainc'));
            option = {
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        splitNumber: 10,       // 分割段数，默认为5
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500']],
                                width: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber: 10,   // 每份split细分多少段
                            length: 12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            length: 30,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },

                        detail: {
                            formatter: '{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontWeight: 'bolder',
                                fontSize: 20
                            }
                        },
                        data: [{ value: 50 }]
                    }
                ]
            };
            myChart.setOption(option);
        }
        function loadChart() {
            var myChart = echarts.init(document.getElementById('maind'));
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['IIS使用率', 'CPU使用率', 'ARM使用率']
                },

                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: 'IIS使用率', type: 'line',
                        data: [1720, 8132, 2101, 3134, 490, 5230, 6210]
                    },
                    {
                        name: 'CPU使用率', type: 'line',
                        data: [2620, 4182, 5191, 4234, 2290, 1330, 9310]
                    },
                    {
                        name: 'ARM使用率', type: 'line',
                        data: [2320, 1822, 7791, 23344, 22790, 5530, 5110]
                    }
                ]
            };

            myChart.setOption(option);
        }
    </script>
    <div class="panel panel-default" style="margin-bottom: 10px;">
        <div class="panel-heading">实时监控</div>
        <div class="panel-body" style="padding: 0px;">
            <div>
                <div id="maina" style="width: 33%; float: left; height: 250px;"></div>
                <div id="mainb" style="width: 34%; float: left; height: 250px;">2</div>
                <div id="mainc" style="width: 33%; float: left; height: 250px;">3</div>
            </div>
            <div style="position: relative; top: -20px;">
                <div style="width: 33%; float: left; text-align: center;">IIS使用率</div>
                <div style="width: 34%; float: left; text-align: center;">CPU使用率</div>
                <div style="width: 33%; float: left; text-align: center;">ARM使用率</div>
            </div>
        </div>
    </div>
    <div class="panel panel-default" style="margin-bottom: 10px;">
        <div class="panel-heading">实时监控</div>
        <div class="panel-body" style="padding: 0px;padding-top:20px;">
            <div id="maind" style="height: 250px;"></div>
        </div>
    </div>
    <div>
        <div style="float: left; width: 49%;">
            <div class="panel panel-default" style="margin-bottom: 10px;">
                <div class="panel-heading">服务器信息</div>
                <div class="panel-body" style="height: 300px;">
                    <table>
                        <tr>
                            <td>操作系统名称</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>操作系统版本</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>数据库服务器端口</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>数据库名称</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>用户名</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div style="float: right; width: 49%;">
            <div class="panel panel-default" style="margin-bottom: 10px;">
                <div class="panel-heading">数据库信息</div>
                <div class="panel-body" style="height: 300px;">
                    <table>
                        <tr>
                            <td>数据库类型</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>数据库服务器地址</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>数据库服务器端口</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>数据库名称</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>用户名</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
